<template>
	<view class="my">
		<!-- 头部 -->
		<myhead></myhead>
		<!-- 第一个选项 -->
		<view class="myitem_first">
			<view class="myitem_left">
				<u-icon name="level" :bold="true" color="green"></u-icon>
				<view class="text">
					升级VIP
				</view>
			</view>
			<view class="myitem_right">
				<view class="descript">
					免广告,会员免费
				</view>
				<u-icon name="arrow-right" :bold="true" color="#ccc"></u-icon>
			</view>
		</view>
		<view class="tip">
			类别,提醒,密码,皮肤设置
		</view>
		
		<!-- 选项列表渲染 -->
		<myitem :list="list"></myitem>
		<!-- 底部导航栏 -->
		<custom-bar :current="4"></custom-bar>
	</view>
</template>

<script>
	import myhead from "@/components/my/head/head.vue"
	import myitem from "@/components/my/myitem/myitem.vue"
	export default {
		data() {
			return {
				list: [{
						icon: 'grid',
						title: '类别设置',
						color:'#EEB4B4'
					},
					{
							icon: 'star',
							title: '我的勋章',
							color:'#87CEFF'
					},
					{
						icon: 'error-circle',
						title: '记账提醒',
						color:'#ff9933'
					},
					{
						icon: 'lock-open',
						title: '密码设置',
						color:'#CD8C95'
					},
					{
						icon: 'heart',
						title: '皮肤装扮',
						color:'#ff99cc'
					},
					{
						icon: 'edit-pen',
						title: '字体颜色',
						color:'#DDA0DD'
					},
					{
						icon: 'trash',
						title: '最近删除',
						color:'#FF8C69'
					},
					{
						icon: 'setting',
						title: '更多设置',
						color:'#D2691E'
					},
					{
							icon: 'grid',
							title: '导出账单',
							color:'#EEB4B4'
						},
						{
								icon: 'star',
								title: '保存数据到云端(防丢失)',
								color:'#87CEFF'
						},
						{
							icon: 'error-circle',
							title: '常见问题汇总',
							color:'#ff9933'
						},
						{
							icon: 'lock-open',
							title: '密码设置',
							color:'#CD8C95'
						},
						{
							icon: 'heart',
							title: '有意见去反馈',
							color:'#ff99cc'
						},
						{
							icon: 'edit-pen',
							title: '隐私政策',
							color:'#DDA0DD'
						},
						{
							icon: 'trash',
							title: '退出登录',
							color:'#FF8C69'
						},
						{
							icon: 'setting',
							title: '账号注销',
							color:'#D2691E'
						}
				]
			};
		},
		methods: {

		},
		components: {
			myhead,
			myitem
		}
	}
</script>

<style lang="scss">
	.my {
		padding-bottom: 120rpx;
		background-color: #FFFFE0;
	}

	.myitem {
		margin: 20rpx 0 0;
	}

	.tip {
		padding: 0 20rpx;
		margin: 20rpx 0;
		font-size: 24rpx;
		color: #ccc;
	}

	.myitem_first {
		display: flex;
		width: 100%;
		height: 80rpx;
		background-color: #fff;
		justify-content: space-between;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.myitem_left,
	.myitem_right {
		display: flex;
		text-align: center;
		align-items: center;
		font-size: 26rpx
	}

	.text {
		margin-left: 16rpx;
	}

	.descript {
		color: #ccc;
		margin-right: 16rpx;
	}
</style>
